/**
 * Created by yoyoyk on 2017/3/18.
 * Dalyn update on 2017/4/13.
 */
import React from "react";
import Confirm from '../../../common/Confirm'
import Select from '../../../common/Select'
import InputBox from '../../../common/InputBox'
import Packapply from './Packapply'
import Handlelog from './Handlelog'

/*信息列表*/
export default class Orderdetail extends React.Component{
    constructor(props){
        super(props);
        this.state={
            num:0,
            arr:[],
            payment_height:34,
            takegoods_height:34,
            width:0
        }

        this.arr = [{xuhao:"1",kuanhao:"WWYK-20170228-0010",tupian:"+添加图片",miaoshu:"面料",guige:"12M",danjia:"¥10.00",shuliang:"12",jine:"¥120.00"},
            {xuhao:"2",kuanhao:"WWYK-20170228-0010",tupian:"+添加图片",miaoshu:"面料",guige:"12M",danjia:"¥10.00",shuliang:"12",jine:"¥120.00"},
            {xuhao:"3",kuanhao:"WWYK-20170228-0010",tupian:"+添加图片",miaoshu:"面料",guige:"12M",danjia:"¥10.00",shuliang:"12",jine:"¥120.00"},
            {xuhao:"4",kuanhao:"WWYK-20170228-0010",tupian:"+添加图片",miaoshu:"面料",guige:"12M",danjia:"¥10.00",shuliang:"12",jine:"¥130.00"},
            {xuhao:"5",kuanhao:"WWYK-20170228-0010",tupian:"+添加图片",miaoshu:"面料",guige:"12M",danjia:"¥10.00",shuliang:"12",jine:"¥120.00"},
            {xuhao:"6",kuanhao:"WWYK-20170228-0010",tupian:"+添加图片",miaoshu:"面料",guige:"12M",danjia:"¥10.00",shuliang:"12",jine:"¥120.00"},
            {xuhao:"7",kuanhao:"WWYK-20170228-0010",tupian:"+添加图片",miaoshu:"面料",guige:"12M",danjia:"¥10.00",shuliang:"12",jine:"¥120.00"},
            {xuhao:"8",kuanhao:"WWYK-20170228-0010",tupian:"+添加图片",miaoshu:"面料",guige:"12M",danjia:"¥10.00",shuliang:"12",jine:"¥120.00"}

        ];

        this.arr1=[
            {text:"请选择贸易商",value:"aaa"},
            {text:"111",value:"bbb"},
            {text:"222",value:"ccc"},
            {text:"333",value:"ddd"},
            {text:"444",value:"eee"}
        ];
        this.arr2=[
            "XXX合同说明书",
            "XXX采购说明书",
            "XXX合同书名书"
        ];
        this.arr3=[
            "一期交货10%，截止时间2017年3月10日",
            "一期交货90%，截止时间2017年3月27日"
        ];

        this.arr4=[
            {date:"2017-01-21 14:24",condition:"【待发货】已付款10%"},
            {date:"2017-01-21 14:24",condition:"【待收货】，对方已发货11款"},
            {date:"2017-01-21 14:24",condition:"【已收货】共34件商品，总价值434565元"},
            {date:"2017-01-21 14:24",condition:"【发货完成】对方已全部发货。乙方销售：刘大盛187389572"},
        ];

        this.arr5=[
            {date:"2017-01-21 14:24",condition:"【待发货】已付款10%"},
            {date:"2017-01-21 14:24",condition:"【待收货】已付款70%"},
            {date:"2017-01-21 14:24",condition:"【已收货】共34件商品，总价值434565元"},
            {date:"2017-01-21 14:24",condition:"【发货完成】对方已全部发货。乙方销售：刘大盛187389572"},
        ];


        this.money={
            total:87887,pay:6786
        }

    }


    componentWillMount(){
        this.state.num=this.arr.length

        this.state.width=this.money.pay/this.money.total*460

        this.setState({
            arr:this.arr
        });



    }
    // addDepartmenlist(){
    //     return this.state.Department.map((context,index)=>{
    //         return (
    //             <AddDepartment key={index+'-'} context={context.name} ref={index+'add'} onchose={this.onchose.bind(this)} index={index}/>
    //         );
    //     });
    // }


    handleclick(){}
    text(){
        this.arr.push({xuhao:"77",kuanhao:"WWYK-20170228-0010",tupian:"asda",miaoshu:"面料",guige:"12M",danjia:"¥10.00",shuliang:"12",jine:"¥120.00"});
        this.setState({
            arr:this.arr
        });
    }

    tradeinfo(){
        return this.arr3.map((info,index)=>{
            return (
                    <p key={index+"-"} style={{height:"30px",lineHeight:"30px",width:"400px"}}>{info}</p>
            )
        })
    }

    additem(){
        return this.state.arr.map((context,index)=>{
            return (
                <tr key={index+"-"} style={{height:32}} onClick={this.text.bind(this)}>
                    <th style={{height:32,width:32,border:"1px solid #ccc"}}>{context.kuanhao}</th>
                    <th style={{height:32,width:32,border:"1px solid #ccc"}}>{context.tupian}</th>
                    <th style={{height:32,width:32,border:"1px solid #ccc"}}>{context.miaoshu}</th>
                    <th style={{height:32,width:32,border:"1px solid #ccc"}}>{context.guige}</th>
                    <th  style={{height:32,width:32,border:"1px solid #ccc"}}>{context.danjia}</th>
                    <th  style={{height:32,width:32,border:"1px solid #ccc"}}>{context.shuliang}</th>
                    <th  style={{height:32,width:32,border:"1px solid #ccc"}}>{context.jine}</th>
                </tr>
            );
        });
    }



    apply(){
        return this.arr2.map((item2,index)=>{
            return(
                <Packapply oArr={item2} key={index}/>
            )
        })
    }

    takegoods(){
        return this.arr4.map((item4,index)=>{
            return(
                    <div  key={index+"-"} style={{width:900,height:30,float:"right"}}>
                        <span style={{width:120,height:30,lineHeight:"30px",display:"block",float:"left"}}>{item4.date}</span>
                        <span style={{width:700,height:30,lineHeight:"30px",display:"block",float:"left"}}>{item4.condition}</span>
                    </div>
            )
        })
    }

    payment(){
        return this.arr5.map((item5,index)=>{
            return(
                <div  key={index+"-"} style={{width:900,height:30,float:"right"}}>
                    <span style={{width:120,height:30,lineHeight:"30px",display:"block",float:"left"}}>{item5.date}</span>
                    <span style={{width:700,height:30,lineHeight:"30px",display:"block",float:"left"}}>{item5.condition}</span>
                </div>
            )
        })

    }

    opratelog(){
        this.refs.Handlelog.setState({
            visible : true
        })
    }

    componentDidMount(){
        //console.dir(this.refs.test1.clientHeight);
        this.setState({
            // payment_height:this.refs.test1.clientHeight-30,
            // takegoods_height:this.refs.test2.clientHeight-30


        });
    }

    render() {

        return (
            <div className="orderdetail_box" style={{width: 1233, minHeight: 875, background: "#f5f5f5", paddingTop: "20px",paddingBottom:"30px"}}>
                <p style={{height: 44, lineHeight: "44px"}}>订单管理>订单详情</p> 

                <div style={{width: 1133, minHeight: 500, background: "#fff", padding: "10px 40px 50px 40px",border:"1px solid #ccc",borderRadius:"5px"}}>
                    <div>
                        <p class="order_detail_title">
                            <i class="order_detail_tLine"></i>
                            <span class="order_detail_tText">订单详情</span>
                        </p>
                        <p style={{height:58,lineHeight:"58px",paddingLeft:"30px",fontSize:"16px"}}>订单详情</p>
                        <div>
                            <div>
                                <input type="radio" name="sex" value="male" /> 山东实业有限公司1
                                <label htmlFor="">已接单</label>
                            </div>
                           <div>
                               <input type="radio" name="sex" value="female" /> 山东实业有限公司1
                               <label htmlFor="">未接单</label>
                           </div>
                            <Confirm style={{width:64,height:28,color:"#fff",marginLeft:"625px",backgroundColor:"#36b3b3"}} tcontext="签订"/>
                        </div>
                    </div>



                    {/*<p style={{width: 1100, height: 58, lineHeight: "58px", background: "#f4fafa", border: "1px solid #cacaca",position:"relative"}}>
                        <span style={{display:"block",height:58,lineHeight:"58px",float:"left",marginLeft:"44px"}}>2017-01-23 14:25</span>
                        <span style={{display:"block",height:58,lineHeight:"58px",float:"left",marginLeft:"44px"}}>【待接收】订单已发布。</span>
                        <Confirm style={{width:64,height:28,color:"#fff",marginLeft:"625px",backgroundColor:"#36b3b3"}} tcontext="接单"/>
                    </p>*/}

                    <div style={{width: 1100, height: 238, border: "1px solid #36b3b3",marginTop:"7px"}}>
                        <p style={{color: "#fff",width:1102,height: 44, lineHeight: "44px", fontSize: "16px",background:"#36b3b3",float:"left"}}>
                            <span style={{width:107,height:44,lineHeight:"44px",textAlign:"right",display:"block",float:"left"}}>订单编号：</span>
                            <span style={{lineHeight:"44px",display:"block",width:"150px",marginRight:"30px",float:"left"}}>WXYH-20171228-23</span>
                            <span style={{width:150,lineHeight:"44px",marginRight:"337px",float:"left"}}>采购商品：<span>成衣</span></span>
                            <span style={{width:150,float:"left",lineHeight:"44px"}}>订单金额：<span>¥356443</span></span>
                            <span style={{width:150,float:"left",lineHeight:"44px"}}>已支付：<span>¥56443</span></span>
                        </p>

                        <div style={{width:341,height:135,float:"left",marginLeft:"204px",marginTop:"28px"}}>
                            <p style={{height:45,lineHeight:"45px",color:"#868686"}}>
                                <span>甲方：</span>
                                <span >山东世纪友华实业有限公司</span>
                            </p>
                            <p style={{height:45,lineHeight:"45px",color:"#868686"}}>
                                <span>地址：</span>
                                <span>德州市经济开发区香港世纪工业园</span>
                            </p>
                            <p style={{height:45,lineHeight:"45px",color:"#868686"}}>
                                <span>联系人：</span>
                                <span>刘大盛</span>
                            </p>
                        </div>

                        <div style={{width:0,height:94,borderLeft:"1px dashed #ccc",float:"left",marginTop:"40px"}}></div>

                        <div style={{width:341,height:135,float:"left",marginLeft:"140px",marginTop:"28px"}}>
                            <p style={{height:45,lineHeight:"45px",color:"#868686"}}>
                                <span>乙方：</span>
                                <span >山东世纪友华实业有限公司</span>
                            </p>
                            <p style={{height:45,lineHeight:"45px",color:"#868686"}}>
                                <span>地址：</span>
                                <span>德州市经济开发区香港世纪工业园</span>
                            </p>
                            <p style={{height:45,lineHeight:"45px",color:"#868686"}}>
                                <span>联系人：</span>
                                <span>刘大盛</span>
                            </p>
                        </div>



                    </div>


                    <p style={{color: "#3f9cb5", height: 44, lineHeight: "44px", fontSize: "16px"}}>商品明细</p>
                    <div style={{width: 1040, minHeight: 280, border: "1px dashed #ccc", padding: "30px"}}>
                        <table style={{width: 1040, borderCollapse: "collapse"}}>
                            <thead>

                            <tr style={{height: "32px", background: "#f2f2f2"}}>
                                <th style={{height: 32, width: 150, border: "1px solid #ccc"}}>款号</th>
                                <th style={{height: 32, width: 210, border: "1px solid #ccc"}}>花型图片</th>
                                <th style={{height: 32, width: 160, border: "1px solid #ccc"}}>商品名称/描述</th>
                                <th style={{height: 32, width: 105, border: "1px solid #ccc"}}>规格/尺码</th>
                                <th style={{height: 32, width: 100, border: "1px solid #ccc"}}>价格</th>
                                <th style={{height: 32, width: 105, border: "1px solid #ccc"}}>数量</th>
                                <th style={{height: 32, width: 170, border: "1px solid #ccc"}}>金额</th>
                            </tr>
                            </thead>
                            <tbody>
                            {
                                this.additem()
                            }
                            <tr style={{height: "32px"}}>
                                <th style={{height: 32, width: 32, border: "1px solid #ccc"}}></th>
                                <th style={{height: 32, width: 150, border: "1px solid #ccc"}}>合计</th>
                                <th colSpan='3' style={{height: 32, width: 210, border: "1px solid #ccc"}}></th>
                                <th style={{height: 32, width: 105, border: "1px solid #ccc"}}></th>
                                <th style={{height: 32, width: 150, border: "1px solid #ccc"}}></th>

                            </tr>
                            <tr style={{height: "32px"}}>
                                <th style={{height: 32, width: 32, border: "1px solid #ccc"}}></th>
                                <th style={{height: 32, width: 150, border: "1px solid #ccc"}}>合计(大写)</th>
                                <th colSpan='3' style={{height: 32, width: 210, border: "1px solid #ccc"}}></th>
                                <th style={{height: 32, width: 105, border: "1px solid #ccc"}}></th>
                                <th style={{height: 32, width: 150, border: "1px solid #ccc"}}></th>
                            </tr>

                            </tbody>
                        </table>

                        <div style={{width:1000,height:"auto",marginTop:"10px",background:"#f4fafa",padding:"30px 0 30px 40px"}}>
                            <div style={{width:1102,minHeight:"60px",position:"relative"}}>
                                <p style={{width:"80px"}}>交货要求：</p>
                                <div style={{width:"400px",minHeight:"40px",position:"absolute",left:"100px",top:0}} >
                                    {
                                        this.tradeinfo()
                                    }
                                </div>
                            </div>

                            <p><span>合同编号：</span><span>YW-54-01</span></p>

                            <div style={{width:315,height:100,marginTop:"5px"}}>
                                <p style={{width:70,height:30,lineheight:"30px",float:"left"}}>合同附件</p>
                                <div style={{float:"right",width:240,minHeight:"30px"}}>

                                    {
                                        this.apply()
                                    }
                                </div>
                            </div>

                            <p style={{fontSize:'14px'}}>备注：<span>尽快发货</span></p>

                        </div>
                    </div>
                </div>
            </div>
        )
    }
}
